<template>
  <div class="AdminInfo">

    <div class="main">
      <el-card class="el-card">
        <div slot="header">{{loginAdmin.name}}</div>
        <div class="card-img">
          <el-upload
            action="/admin/userface"
            :show-file-list="false"
            :headers="headers"
            :on-success="onSuccess"
            :on-error="onError"
            style="display:inline-flex"
          >
            <el-button type="text"><img
                :src="loginAdmin.userFace"
                style="width:90px ;height:90px;border-radius:45px"
              /></el-button>
          </el-upload>

        </div>
        <div class="card-content">
          <table>
            <tr class="table-row">
              <td class="table-label">电话号码:</td>
              <td class="table-info">{{loginAdmin.telephone}}</td>
            </tr>

            <tr class="table-row">
              <td class="table-label">手机号码:</td>
              <td class="table-info">{{loginAdmin.phone}}</td>
            </tr>

            <tr class="table-row">
              <td class="table-label">居住地址:</td>
              <td class="table-info">{{loginAdmin.address}}</td>
            </tr>

            <tr class="table-row">
              <td class="table-label">权限角色:</td>
              <td class="table-info">
                <el-tag
                  type="success"
                  v-for="(role,index) in loginAdmin.roles"
                  :key="index"
                  style="margin-right:10px"
                >{{role.nameZh}}</el-tag>
              </td>
            </tr>

          </table>
        </div>
        <div class="card-foot">
          <el-button
            type="primary"
            style="margin-left:200px"
            @click="showUpdateAdminInfoDialog"
          >修改信息</el-button>
          <el-button
            type="danger"
            style="margin-right:200px"
            @click="showUpdateAdminPasswordDialog"
          >修改密码</el-button>
        </div>
      </el-card>
    </div>

    <div class="dialogs">

      <el-dialog
        title="编辑用户信息"
        :visible.sync="updateAdminInfoDialogVisible"
        width="30%"
        @close="closeDialog"
      >
        <el-form :model="admin">
          <el-form-item
            label="用户昵称:"
            label-width="20%"
          >
            <el-input
              v-model="admin.name"
              style="width:80%"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="电话号码:"
            label-width="20%"
          >
            <el-input
              v-model="admin.telephone"
              style="width:80%"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="手机号码:"
            label-width="20%"
          >
            <el-input
              v-model="admin.phone"
              style="width:80%"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="用户地址:"
            label-width="20%"
          >
            <el-input
              v-model="admin.address"
              style="width:80%"
            ></el-input>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="updateAdminInfoDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitAdminInfoDialog"
          >确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="修改密码"
        :visible.sync="updateAdminPasswordDialogVisible"
        width="30%"
        @close="closeDialog"
      >
        <el-form
          :model="passwordInfo"
          status-icon
          :rules="rules"
          ref="passwordForm"
        >
          <el-form-item
            label="请输入旧密码:"
            label-width="20%"
            prop="oldPassword"
          >
            <el-input
              v-model="passwordInfo.oldPassword"
              type="password"
              style="width:80%"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="请输入新密码:"
            label-width="20%"
            prop="newPassword"
          >
            <el-input
              v-model="passwordInfo.newPassword"
              type="password"
              style="width:80%"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="请确认新密码:"
            label-width="20%"
            prop="checkNewPassword"
          >
            <el-input
              v-model="passwordInfo.checkNewPassword"
              type="password"
              style="width:80%"
            ></el-input>
          </el-form-item>

        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="updateAdminPasswordDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitAdminPasswordDialog"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>


<script>
import { mapState } from 'vuex'
import _ from 'lodash'
export default {

  name: 'AdminInfo',

  data() {


    var validateOld = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'));
      } else {
        callback()
      }
    };

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.passwordInfo.checkNewPassword !== '') {
          this.$refs.passwordForm.validateField('checkNewPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordInfo.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      updateAdminInfoDialogVisible: false,
      updateAdminPasswordDialogVisible: false,
      admin: {},
      passwordInfo: {
        oldPassword: '',
        newPassword: '',
        checkNewPassword: ''
      },
      rules: {
        oldPassword: [
          { validator: validateOld, trigger: 'blur' }
        ],
        newPassword: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkNewPassword: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      headers: {
        Authorization: window.sessionStorage.getItem('tokenStr')
      }

    }

  },

  methods: {
    //显示对话框并初始化数据
    showUpdateAdminInfoDialog() {
      console.log("object");
      this.admin = _.cloneDeep(this.loginAdmin)
      this.updateAdminInfoDialogVisible = true
    },

    showUpdateAdminPasswordDialog() {
      this.updateAdminPasswordDialogVisible = true
    },

    submitAdminInfoDialog() {
      this.putRequest(`admin/info`, this.admin).then(resp => {
        if (resp) {
          this.initCurrentAdmin()
        }
      })
      this.updateAdminInfoDialogVisible = false
    },

    submitAdminPasswordDialog() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          this.putRequest(`/admin/pass`, this.passwordInfo).then(resp => {
            if (resp) {
              //删除token
              window.sessionStorage.removeItem('tokenStr')
              //删除登录用户信息
              window.sessionStorage.removeItem('admin')
              //清除菜单数据
              this.$store.commit("initRoutes", []);
              //跳转到登录页
              this.$router.replace('/')
            }

          })
        } else {
          this.$message.error('请正确填写信息')
          return false;
        }
      });
    },
    //初始化当前登录操作员信息
    initCurrentAdmin() {
      this.getRequest(`admin/info`).then(resp => {
        if (resp) {
          console.log(resp);
          window.sessionStorage.setItem('admin', JSON.stringify(resp))
          this.$store.commit('initCurrentAdmin', resp)
        }
      })
    },
    //关闭对话框之后的处理逻辑
    closeDialog() {
      this.admin = {}
      this.passwordInfo = {}
    },
    //上传图片成功后
    onSuccess() {
      this.$message.success('头像更新成功')
      this.initCurrentAdmin()
    },
    //上传图片失败后
    onError() {
      this.$message.error('服务器异常，更新失败')
    }
  },
  computed: mapState([
    'loginAdmin'
  ]),
}
</script>


<style  scoped>
.el-card {
  margin: auto;
  width: 50%;
}
.card-img {
  display: flex;
  justify-content: center;
}
.card-content {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  font-family: 华文楷体;
  font-size: 20px;
  color: rgba(0, 140, 255, 0.698);
}
.card-foot {
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.table-label {
  font-size: 25;
  padding-right: 30px;
}
</style>